<template>
	<div class="couponstyle">
		<h2>{{ datas.text }}</h2>

		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<el-form label-width="auto" style="max-width: 600px">
						<div class="title">选择优惠券</div>
						<div>
							<div>
								<div v-for="(item, index) in datas.couponList" :key="index" class="list-item mb20 par10 pl10 bd2 mr10">
									<div class="name mb10 mt10">{{ item.couponName }}</div>
									<div class="content mb10">{{ item.discountContentView }}</div>
									<van-icon class="el-icon-circle-close" name="close" @click="deleteItem(index)" />
								</div>
							</div>
							<el-button plain @click="onOpen" :icon="Plus" class="mb10">添加</el-button>
						</div>
						<el-form-item label="选择风格">
							<el-radio-group v-model="datas.mode">
								<el-radio-button :label="1">
									<template #default>
										<span class="icon decorate-iconfont icon-daohanghengxianghuadong"></span>
									</template>
								</el-radio-button>
								<el-radio-button :label="2">
									<template #default><span class="icon decorate-iconfont icon-yihangerge"></span></template>
								</el-radio-button>

								<el-radio-button :label="3">
									<template #default><span class="icon decorate-iconfont icon-yihangsange"></span></template>
								</el-radio-button>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="背景图片">
							<div class="choice-image choice-image-delete" @click="choiceFileImage">
								<el-image v-if="datas.fill.bgImage != ''" :src="STATIC_URL + datas.fill.bgImage" fit="contain" />
								<el-icon v-else>
									<ele-Plus />
								</el-icon>
								<div class="delete-content" @click.stop="datas.fill.bgImage = ''" v-if="datas.fill.bgImage != ''">
									<SvgIcon name="ele-DeleteFilled"></SvgIcon>

									<!-- <van-icon name="delete" /> -->
								</div>
							</div>
						</el-form-item>

						<el-form-item label="文字颜色">
							<el-input v-model="datas.fill.color">
								<template #prepend>
									<el-color-picker v-model="datas.fill.color" />
								</template>
							</el-input>
						</el-form-item>
						<el-form-item label="按钮背景">
							<el-input v-model="datas.button.bgColor">
								<template #prepend>
									<el-color-picker v-model="datas.button.bgColor" />
								</template>
							</el-input>
						</el-form-item>
						<el-form-item label="按钮文字">
							<el-input v-model="datas.button.color">
								<template #prepend>
									<el-color-picker v-model="datas.button.color" />
								</template>
							</el-input>
						</el-form-item>
						<el-form-item label="间距">
							<div class="flex">
								<el-slider class="ml20" v-model="datas.space" />
								<el-input class="ml20" v-model="datas.space">
									<template #suffix> px </template>
								</el-input>
							</div>
						</el-form-item>
					</el-form>
				</div>
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>
		<CouponDialog ref="CouponDialogRef" @choice="choice"></CouponDialog>
		<FileChoice ref="FileChoiceRef" @choice-file="choiceFileCallBack"></FileChoice>
	</div>
</template>

<script setup lang="ts" name="couponstyle">
import { defineAsyncComponent, ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { CouponApi } from '/@/api/shop/coupon/index';
import { STATIC_URL } from '/@/utils/config';

const CouponDialog = defineAsyncComponent(() => import('/@/views/shop/activity/coupon/choice/index.vue'));
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const CouponDialogRef = ref();
const FileChoiceRef = ref();
const props = defineProps({
	datas: {},
});
let name = ref('couponstyle');

const onOpen = () => {
	CouponDialogRef.value.onOpen();
};

const choice = async (coupons: ChoiceCoupon[]) => {
	// const { data } = await CouponApi().view(coupons[0].couponId);
	// console.log('data: ', data);

	console.log('coupon: ', coupons);
	props.datas.couponList.push(...coupons);
};

const choiceFileImage = () => {
	FileChoiceRef.value.openFileChoiceDialog();
};

const choiceFileCallBack = (cfi: ChoiceFileInfo[]) => {
	props.datas.fill.bgImage = cfi[0].visitRelativePath;
};

const deleteItem = (index: number) => {
	props.datas.couponList.splice(index, 1);
};
</script>

<style scoped lang="scss">
.couponstyle {
	width: 100%;
	padding: 0 10px 20px;
	box-sizing: border-box;
	/* 标题 */
	h2 {
		padding: 24px 16px 24px 0;
		margin-bottom: 15px;
		border-bottom: 1px solid #f2f4f6;
		font-size: 18px;
		font-weight: 600;
		color: #323233;
	}
}

.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}

	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}

:deep(.el-input-group__prepend) {
	padding: 0px !important;
}

:deep(.el-color-picker__trigger) {
	padding: 0px;
}

:deep(.el-color-picker__color) {
	border: 0px;
}
</style>
